import React, {memo, useState} from "react";
import { Map } from "immutable";

export default function App() {

    const [state, setState] = useState({
        name: "zhangyi",
        age: 8,
        info: {
            title: "大笨蛋",
            description: "很傻逼",
        },
        child: {
            message: "儿子你好",
        }
    })

    const updateTitle = () => {
        const oldObj = Map(state);
        // 深层次修改对象属性
        const newObj = oldObj.setIn(["info", "title"], "111");
        setState(newObj.toJS())
    }

    return <div>
        <button onClick={updateTitle}>修改title</button>
        <span>{state.info.title}</span>
        <Child message={state.child.message} />
    </div>
}

// memo可以进行props浅比较 如果props里面值没变 则不重新渲染子组件
const Child = memo(function Child(props) {
    return <div>
        {console.log(props.message)}
        {props.message}
    </div>
})